<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>My JSP 'roomKind.jsp' starting page</title>
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/easyui/1.3.4/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/wu.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/icon.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/1.3.4/jquery.easyui.min.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
		<style type="text/css">
.pb {
	width: 800px;
	height: 300px;
}

.px {
	width: 800px;
	height: 300px;
	display: none;
}

.cb {
	margin-top: 10px;
	width: 700px;
	height: 30px;
	border-bottom: 4px solid black;
}

.cx {
	float: left;
	margin-left: 10px;
	width: 100px;
	height: 30px;
	border: 2px solid black;
}

.ch {
	float: left;
	margin-left: 15px;
	width: 100px;
	height: 30px;
	border: 2px solid black;
}

.bg {
	background-color: #FC9
}
</style>
		<script type="text/javascript">
			$(function(){
				$("#hc").click(function(){
						$("#xp").removeClass().addClass("pb");
						$("#bp").removeClass().addClass("px");
						$("#hp").removeClass().addClass("px");
						$("#hc").addClass("bg");
						$("#xc").removeClass("bg");
						$("#bc").removeClass("bg");
					});
				$("#xc").click(function(){
					$("#xp").removeClass().addClass("px");
					$("#bp").removeClass().addClass("pb");
					$("#hp").removeClass().addClass("px");
					$("#xc").addClass("bg");
					$("#hc").removeClass("bg");
					$("#bc").removeClass("bg");
				});
				$("#bc").click(function(){
					$("#xp").removeClass().addClass("px");
					$("#bp").removeClass().addClass("px");
					$("#hp").removeClass().addClass("pb");
					$("#bc").addClass("bg");
					$("#xc").removeClass("bg");
					$("#hc").removeClass("bg");
				});
			});	
			$(function(){
				$('#tab').datagrid({   
					    url:'${pageContext.request.contextPath}/roomKind?op=show',   
					    columns:[[ 
					    	{field:'id',title:'编号',width:110},   
					        {field:'name',title:'会议室名称',width:190},   
					        {field:'descroom',title:'会议室描述',width:190} 
					    		]],
					    striped:true,
					    fitColumns : true,
						loadMsg : '请等待...',		
					});
			});
			
		</script>
		
	</head>

	<body>
		<div
			style="width: 800px; height: 40px; margin-left: 50px; margin-top: 15px;">
			人事管理》会议室管理
		</div>
		<div
			style="width: 800px; height: 400px; border-top: 1px solid black; margin-left: 50px">
			<div class="cb">
				<div class="cx" id="xc">
					1
				</div>
				<div class="ch" id="hc" onclick="bb()">
					2
				</div>
				<div class="ch" id="bc">
					3
				</div>
			</div>
			<div class="pb" id="bp">
				1
			</div>
			<div class="px" id="xp">
				2
			</div>
			<div class="px" id="hp">
				<table id="tab"></table>
			</div>


		</div>


	</body>
</html>
